<template>
    <div class="time-page">
        <el-dropdown trigger="click" placement="bottom-end">
            <el-button type="primary" class="time-button">
                选择时间<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
                <div class="time-dropdown-content">
                    <div class="time-dropdown-head">
                        <p>选择时间</p>
                            <!-- <Icon type="md-close" class="headDrop-icon" :size="19" @click="visible = false" /> -->
                    </div>
                    <div align="right" class="time-dropdown-switch">
                        <el-switch
                        style="display: block"
                        v-model="switchValue"
                        active-color="#A0CFFF"
                        inactive-color="#A0CFF"
                        active-text="指定时间"
                        inactive-text="最近"
                        >
                        </el-switch>
                    </div>
                    <div class="time-dropdown-slider" v-show="switchValue">
                        <vue-slider v-model="dateValue" :interval="10" :min="0" :max="120" :marks="dateMarks" width="488px" height="16px" style="margin: 0 auto;" :tooltip="'none'"></vue-slider>
                    </div>
                    <div v-show="!switchValue" class="time-dropdown-datePicker">
                        <el-date-picker
                        v-model="timeValue"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        prefix-icon="el-icon-date" style="width: 100%;">
                        </el-date-picker>
                    </div>
                    <div class="time-dropdown-button">
                        <el-button type="primary" @click="handleTime">确定</el-button>
                    </div>
                </div>
            </template>
            </el-dropdown>
    </div>
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';

export default defineComponent({
    name: 'time-comps',
    components: { VueSlider },
    setup() {
        // const { picker } = getCurrentInstance() as any;
        // let equipment = ref('');
        let pickerOptions:Object = ref([]);
        let switchValue = ref(false);
        let dateValue = ref(20);
        let timeValue = ref('');
        
        let dateMarks = reactive({
            0: '30m', 10:'1H', 20:'3H', 30:'6H', 40:'12H', 50:'1D', 60:'3D', 70:'7D', 80:'14D', 90:'1M', 100:'3M', 110:'6M', 120:'12M'
        });
        let dateData =  reactive(['30m', '1H', '3H', '6H', '12H', '1D', '3D', '7D', '14D', '1M', '3M', '6M', '12M']);
        const handleTime = () => {
            console.log(dateValue)

        }
        let value = 0;
        let value2 = 10;
        let data= [10, 20, 30];
        console.log(dateData)
        // watch(dateValue)
        return {
            value,
            value2,
            data,
            timeValue,
            dateValue,
            dateData,
            dateMarks,
            switchValue,
            pickerOptions,
            handleTime
        };
    }
});
</script>

<style lang="scss" scoped>
.time-page{
    .time-button{
        background: none;
        color: #0d84ff;
        font-size: 14px;
    }
}
.time-dropdown-content{
    width: 538px;
    padding: 0 10px 10px;
    box-sizing: border-box;
    .time-dropdown-head {
        width: 520px;
        height: 22px;
        position: relative;
        margin-left: -10px;
        font-size: 14px;
        background-color: #f3f3f3;
        padding: 5px 9px 5px 9px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
            color: #515a6e;
        }
    }
}
.time-dropdown-switch{
    width: 500px;
    height: 20px;
    padding-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.time-dropdown-slider{
    height: 62px;
}

// 时间控件样式区
.time-dropdown-datePicker {
    font-size: 15px;
    // background-color: #f3f3f3;
    padding: 15px 0px 0px 0px;
    margin-bottom: 15px;
}
// .headDrop-icon {
//     margin-left: 434px;
//     cursor: pointer;
// }

.time-dropdown-button {
    text-align: center;
}
.ivu-picker-panel-content-left {
    margin-left: 25px;
}
.ivu-picker-panel-content-right {
    margin-left: 50px;
}
 .ivu-picker-panel-body-time {
    width: 538px;
    height: 0px;
}
//隐藏按钮
 .ivu-picker-confirm {
    .ivu-btn-text {
        margin-bottom: 6px;
    }
    .ivu-btn-default {
        display: none;
    }
    .ivu-btn-primary {
        display: none;
    }
}
</style>
<style lang="scss">
.time-dropdown-slider{
    //修改样式去点
    .vue-slider-mark-step {
        width: 1%;
        height: 50%;
        background-color: rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        margin-left: 8px;
    }
    .vue-slider-process {
        background-color: #6292e1;
    }
    .vue-slider-mark:first-child .vue-slider-mark-step {
        display: block;
        margin-left: 10px;
    }
    .vue-slider-mark:last-child .vue-slider-mark-step {
        display: block;
        margin-left: 6px;
    }
    .vue-slider-mark-label{
        font-size: 13px;
    }
}
.time-dropdown-switch{
    .el-switch__core{
        background: #A0CFFF;
        border: 1px solid #A0CFFF;
    }
}
</style>